import React from 'react'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { loginCheck } from '../../api/user.js'
import { connect } from 'react-redux'
import "./login.css"


const onFinishFailed = () => {

}

const login = (props) => {
    return (
        <>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={props.onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[{ required: true, message: '管理员账号' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />}  placeholder="请输入管理员账号" />
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password placeholder="请输入密码" prefix={<LockOutlined className="site-form-item-icon" />} />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                    Submit
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
}

export default connect(
    state => {
        return {
            isLogin: state.getIn(['user', 'isLogin']),
            token: state.getIn(['user', 'token']),
            adminname: state.getIn(['user', 'adminname']),
            role: state.getIn(['user', 'role']),
        }
    },
    dispatch => {
        return {
            onFinish : async (val) => {
                const params = {
                    adminname: val.username,
                    password: val.password
                }
                let res = await loginCheck(params)
                console.log(res)
                if (res.code === '10003') {
                    message.info('密码错误')
                } else if (res.code === '10005') {
                    message.info('用户名不存在')
                } else {
                    message.success({
                        content: '登录成功',
                        className: 'custom-class',
                        style: {
                            marginTop: '20vh'
                        }
                    });
                    dispatch({type: 'SET_ISLOGIN', payload: 'true'})
                    dispatch({type: 'SET_TOKEN', payload: res.data.token})
                    dispatch({type: 'SET_ADMINNAME', payload: res.data.adminname})
                    dispatch({type: 'SET_ROLE', payload: res.data.role})
                    window.location.href = '/'
                }
            }
        }
    }
)(login)